<template>
  <div :style="{ padding: '20px' }">
    <!-- 搜索 -->
    <el-form-item label="医院名称">
      <el-input
        v-model="keyWord"
        placeholder="请输入医院名称"
        clearable
        :style="{ width: '200px' }"
      ></el-input>
      <el-button
        type="primary"
        size="default"
        icon="ele-Search"
        @click="searchKeyWord"
        :style="{ marginLeft: '20px' }"
        >搜索</el-button
      >
    </el-form-item>
    <!-- 表格 -->
    <el-table :data="orderList" border stripe v-loading="loading">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="订单号" prop="outTradeNo"> </el-table-column>
      <el-table-column label="医院名称" prop="hosname"> </el-table-column>
      <el-table-column label="科室名称" prop="depcode"> </el-table-column>
      <el-table-column label="医生职称" prop="title"> </el-table-column>
      <el-table-column label="就诊人" prop="patientName"> </el-table-column>
      <el-table-column label="预约号序" prop="number" width="100">
      </el-table-column>
      <el-table-column label="服务费" prop="amount" width="100">
      </el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString">
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" size="default" @click="goLook(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      v-model:current-page="current"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";

export default defineComponent({
  name: "OrderList",
});
</script>

<script setup lang="ts">
import type { OrderItemType, OrderListType } from "@/api/order/types";
import { reqGetOrderList } from "@/api/order";
// 初始化数据
const keyWord = ref("");
const current = ref(1);
const limit = ref(10);
const total = ref(0);
const orderList = ref<OrderListType>([]);
const loading = ref(false);

/**
 * 封装获取分页列表函数
 * @param page 页码
 */
const getOrderLIst = async (page: number = current.value) => {
  loading.value = true;
  const res = await reqGetOrderList(page, limit.value, keyWord.value);
  orderList.value = res.records;
  total.value = res.total;
  loading.value = false;
};

// 初始化执行
onMounted(() => {
  getOrderLIst();
});

//页码和每页条数改变重新发请求
watch([current, limit], () => {
  getOrderLIst();
  //翻页之后回到顶部
  window.scrollTo(0, 0);
});

/**
 * 搜素
 */
const searchKeyWord = () => {
  getOrderLIst(1);
};

/**
 * 点击查看按钮
 */
const goLook = (row: OrderItemType) => {
  console.log(row);
};
</script>

<style scoped></style>
